<template>
  <div class="amap-test">
    <h2>高德地图测试</h2>
    <div class="map-controls">
      <el-button @click="loadMap" type="primary">加载地图</el-button>
      <el-button @click="addMarkers" type="success">添加标记</el-button>
      <el-button @click="clearMarkers" type="warning">清除标记</el-button>
    </div>
    <div ref="mapContainer" class="map-container"></div>
    <div class="map-info">
      <p>地图状态: {{ mapStatus }}</p>
      <p>标记数量: {{ markerCount }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AmapTest',
  data() {
    return {
      mapInstance: null,
      markers: [],
      mapStatus: '未加载',
      markerCount: 0,
      testData: [
        { name: '北京', coordinates: [116.46, 39.92], utilization: 85 },
        { name: '上海', coordinates: [121.48, 31.22], utilization: 92 },
        { name: '广州', coordinates: [113.23, 23.16], utilization: 76 },
        { name: '深圳', coordinates: [114.07, 22.62], utilization: 88 },
        { name: '成都', coordinates: [104.06, 30.67], utilization: 68 }
      ]
    }
  },

  async mounted() {
    await this.loadAmapScript()
  },

  beforeUnmount() {
    if (this.mapInstance) {
      this.mapInstance.destroy()
    }
  },

  methods: {
    // 加载高德地图脚本
    async loadAmapScript() {
      return new Promise((resolve, reject) => {
        if (window.AMap) {
          this.mapStatus = '脚本已加载'
          resolve()
          return
        }
        
        this.mapStatus = '正在加载脚本...'
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `https://webapi.amap.com/maps?v=1.4.15&key=93a2bc421fe24dc7e31c71276380b0b3&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MapType`
        script.onload = () => {
          this.mapStatus = '脚本加载成功'
          console.log('高德地图脚本加载成功')
          resolve()
        }
        script.onerror = (error) => {
          this.mapStatus = '脚本加载失败'
          console.error('高德地图脚本加载失败:', error)
          reject(error)
        }
        document.head.appendChild(script)
      })
    },

    // 加载地图
    loadMap() {
      if (!window.AMap) {
        this.$message.error('高德地图脚本未加载')
        return
      }

      if (this.mapInstance) {
        this.$message.info('地图已存在')
        return
      }

      try {
        this.mapInstance = new window.AMap.Map(this.$refs.mapContainer, {
          zoom: 5,
          center: [104.066, 30.572],
          mapStyle: 'amap://styles/normal',
          viewMode: '2D'
        })

        // 添加控件
        this.mapInstance.addControl(new window.AMap.Scale())
        this.mapInstance.addControl(new window.AMap.ToolBar())

        this.mapStatus = '地图加载成功'
        this.$message.success('地图加载成功')
      } catch (error) {
        this.mapStatus = '地图加载失败'
        console.error('地图加载失败:', error)
        this.$message.error('地图加载失败')
      }
    },

    // 添加标记
    addMarkers() {
      if (!this.mapInstance) {
        this.$message.error('请先加载地图')
        return
      }

      this.clearMarkers()

      this.testData.forEach(item => {
        const color = item.utilization >= 90 ? '#f56c6c' : 
                     item.utilization >= 70 ? '#e6a23c' : '#67c23a'
        
        const marker = new window.AMap.Marker({
          position: item.coordinates,
          title: item.name,
          content: `
            <div style="
              width: 24px;
              height: 24px;
              background-color: ${color};
              border: 2px solid #fff;
              border-radius: 50%;
              box-shadow: 0 2px 6px rgba(0,0,0,0.3);
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              font-weight: bold;
              font-size: 10px;
              cursor: pointer;
            ">
              ${item.utilization}
            </div>
          `
        })

        // 添加点击事件
        marker.on('click', () => {
          this.$message.info(`点击了${item.name}，利用率：${item.utilization}%`)
        })

        this.mapInstance.add(marker)
        this.markers.push(marker)
      })

      this.markerCount = this.markers.length
      this.mapInstance.setFitView()
      this.$message.success(`添加了${this.markerCount}个标记`)
    },

    // 清除标记
    clearMarkers() {
      if (this.markers.length > 0) {
        this.mapInstance.remove(this.markers)
        this.markers = []
        this.markerCount = 0
        this.$message.info('已清除所有标记')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.amap-test {
  padding: 20px;
  
  h2 {
    margin-bottom: 20px;
    color: #303133;
  }
  
  .map-controls {
    margin-bottom: 20px;
    
    .el-button {
      margin-right: 10px;
    }
  }
  
  .map-container {
    width: 100%;
    height: 400px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  
  .map-info {
    background: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    
    p {
      margin: 5px 0;
      color: #606266;
      
      &:first-child {
        margin-top: 0;
      }
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
